import { Canvas, Chart, Interval, Axis, Legend } from "@antv/f2";
import { BOX9_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { useEffect } from "react";

export function Box9({ hasTitle = true }) {
  const data = [
    { date: '2023-03-25', num: 8, name: '转入' },
    { date: '2023-03-26', num: 13, name: '转入' },
    { date: '2023-03-27', num: 15, name: '转入' },
    { date: '2023-03-28', num: 11, name: '转入' },
    { date: '2023-03-29', num: 11, name: '转入' },
    { date: '2023-03-30', num: 7, name: '转入' },
    { date: '2023-03-25', num: 9, name: '转出' },
    { date: '2023-03-26', num: 6, name: '转出' },
    { date: '2023-03-27', num: 11, name: '转出' },
    { date: '2023-03-28', num: 12, name: '转出' },
    { date: '2023-03-29', num: 7, name: '转出' },
    { date: '2023-03-30', num: 11, name: '转出' }
  ];
  useEffect(() => {
    const context = document.getElementById("Box9").getContext("2d");
    if (!context) return
    const { offsetWidth } = context.canvas;
    setTimeout(() => {
      const { props } = (
        <Canvas context={context} pixelRatio={window.devicePixelRatio}>
          <Chart data={data} style={{ left: "-10px" }}>
            <Legend
              marker="square"
              itemStyle={{ width: offsetWidth / 3, justifyContent: "center" }}
            />
            <Axis
              field="date"
              style={{
                grid: { visibility: 0 },
              }}
              tickCount={3}
              formatter={(label) => label.slice(5).replace("-", ",")}
            />
            <Axis field="num" />
            <Interval
              x="date"
              y="num"
              style={{
                radius: [4, 4, 0, 0],
              }}
              color={{ field: "name", range: ["l(90) 0:#a284e9 1:#d3a408", "l(90) 0:#07ca93 1:#2666a8"] }}
              adjust={{
                type: "dodge",
                marginRatio: 0.05, // 设置分组间柱子的间距
              }}
            />
          </Chart>
        </Canvas>
      );
      const chart = new Canvas(props);
      chart.render();
    }, 1000);
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX9_NAME}</div>}
      <canvas className={styles.main} id="Box9"></canvas>
    </div>
  );
}
